前言

從2019年起，短影音風靡全球，作為一個令人興奮的創作媒介，在傳媒設計上，它能夠在短短的時間內傳達故事和概念；而在程式設計上，幾乎每個主流App都開始推出短影音的功能，如instagram的Reels、Line的Voom、Youtube的shorts以及抖音等軟體，所以以它為一個sideproject是不錯的選擇。

這份實作中，我們會從最初步的建立一個網頁、放上影片、連接firebase資料庫逐步嘗試。

今日實作與概念

最開始，先從安排整體化的配置開始，我們可以單純使用色塊來調配大小以及放的位置，並不急著將影片放上去。很簡單地，可以先做出下圖的效果：

這個實作的概念其實很單純，利用div來做簡單的劃分後，再調整css的高低以及比例，切記css的使用用className與id才可以控制調整的物件。

完整code

// App.js
import './App.css';

function App() {
  return (
    <div className="app">
      <div className="app_top">
        <h1>shorts</h1>
      </div>
      <div className='app_videos'></div>
    </div>
  );
}

export default App;

// App.css
html {
  scroll-snap-type: y mandatory;
}

.app {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: black;
}

.app_top {
  margin-bottom: -50px;
}

.app_top>h1 {
  text-align: center;
  color: white;
}

.app_videos {
  position: relative;
  height: 75vh;
  background-color: white;
  width: 70%;
  border-radius: 20px;
  max-width: 450px;
  max-height: 1200px;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.app_videos::-webkit-scrollbar {
  display: none;
}

.app_videos {
  -ms-overflow-style: none;
  scrollbar-width: none;
}